<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/vue-2.4.0.js"></script>
</head>
<body>
    <div id="app">
        <!--父组件-->
        <com @func="show"></com>
    </div>
    <template id="tpl">
        <div>
            <h1>这是子组件</h1>
            <input type="button" value="子组件的按钮" @click="myclick"/>
        </div>
    </template>
    <script>
        var com = {
            template:'#tpl',
            data:function(){
                return{
                    sonmsg:{name:'小头爸爸',age:15}

                }
            },
            methods:{
                myclick:function () {
                    //emit  触发
                    //第二个参数就可以传递参数了
//                    this.$emit('func',1123);
                    this.$emit('func',this.sonmsg);
                }
            }
        }

        var vm = new Vue({
            el:'#app',
            data:{
                parentmsg:null
            },
            methods:{
                show:function (data) {
//                    console.log('父组件的方法被子组件调用了'+data)
//                    console.log(data)
                    this.parentmsg = data
        }
            },
            components:{
                com
            }

        })

    </script>
</body>
</html>